<template>
	<div class="admin_home">
		<router-link to="pc/home">
			<span>返回首页</span>
		</router-link>
		<div class="box">
			<img src="../assets/img/pc/_.._logo_font20240412_uugai.com-5403812-17128840538238.png"/>
		</div>
		
		<div class="box1">
			<h2>登录</h2>
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="账号" prop="username">
			    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="密码" prop="password">
			    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm()">提交</el-button>
			  </el-form-item>
			</el-form>
		</div>
		
	</div>
</template>

<script>
import { mapActions } from 'vuex';
	export default {
		name:'AdminLogin',
		data(){
			let checkusername = (rule, value, callback) => {
						  if (value === '') {
						    callback(new Error('请输入账号'));
						  } else {
						    callback();
						  }
						};
						var validatePass = (rule, value, callback) => {
						        if (value === '') {
						          callback(new Error('请输入密码'));
						        } else {
						          callback();
						        }
						      };
			return{
				 ruleForm: {
				          username: '',
				          password: '',
				        },
						rules: {
						          username: [
						            { validator: checkusername, trigger: 'blur' }
						          ],
						          password: [
						            { validator: validatePass, trigger: 'blur' }
						          ],
						         
						        }
			}
		},
		methods:{
			...mapActions(['setUser']),
			submitForm() {
			         this.$postkv('/api/login',this.ruleForm).then((resp)=>{
			         	let token = resp.data.data.token;
			         	window.localStorage.setItem("token",token);
			         	this.$get('/api/user/info').then((resp)=>{
							this.setUser({
								name:resp.data.data.name,
								role:resp.data.data.role,
								account:resp.data.data.account,
								img:resp.data.data.img,
							})
			         		if(resp.data.data.role == 'usr'){
								this.$router.push({
									path:'/pc/home',
									query:{name:resp.data.data.name}
								})
							}
							if(resp.data.data.role =='adm'){
								this.$router.push({
									path:'/admin/home',
									query:{name:resp.data.data.name}
								})
							}
			         	})
			         	this.$message({
			         		message:resp.data.msg,
			         		type:'success'
			         	})
			         })
					
			      },
			resetForm(formName) {
			        this.$refs[formName].resetFields();
			      }
		}
	}

</script>

<style scoped>
	.admin_home{
		width: 80%;
		height: 70vh;
		margin: 50px auto;
		text-align: center;
		/* background-color: aqua; */
		display: flex;
	}
	.box{
		width: 50%;
		height: 80%;
		background-color: bisque;
	}
	.box img{
		width: 100%;
		height: 100%;
		box-shadow: 0px 5px 5px 0px gainsboro;
		image-rendering: -moz-crisp-edges;
		            image-rendering: -o-crisp-edges;
		            image-rendering: -webkit-optimize-contrast;
		            image-rendering: crisp-edges;
		            -ms-interpolation-mode: nearest-neighbor;
	}
	.box1{
		text-align: center;
		width: 35%;
		height: 40vh;
		box-shadow: 0px 5px 5px 0px gainsboro;
	}
	.admin_home h2{
		margin-top: 50px;
	}
	 .demo-ruleForm{
		 width: 90%;
		 margin: 50px auto;
	 }
	 .el-button{
		margin-right:2.5rem;
		 width: 90%;
	 }
	 .admin_home span{
		 color: black;
		 font-size: 15px;
		 position: absolute;
		 left: 50%;
		 top: 60px;
	 }
</style>
